<!--
 * @Author: 1754928208 1754928208@qq.com
 * @Date: 2025-06-23 08:48:28
 * @LastEditors: yang fu ren
 * @LastEditTime: 2025-06-23 15:54:10
 * @FilePath: \FrontEndDevelopment01\src\views\UserInfo.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <el-container>
    <el-header style="height: 100px">
      <div class="button-group-container">
        <div class="mb-4" style="width: 100%">
          <el-button type="primary">新增用户</el-button>
          <el-button type="primary">批量删除用户</el-button>
          <div
            class="flex gap-4 mb-4 items-center"
            style="right: 0; margin-top: 20px"
          >
            <el-input
              v-model="input1"
              style="width: 240px"
              size="large"
              placeholder="用户名查询"
              :suffix-icon="Search"
            />
          </div>
        </div>
      </div>
    </el-header>
    <el-main>
      <el-table :data="tableData" style="width: 100%" height="800px">
        <el-table-column fixed type="selection" width="55" />
        <el-table-column prop="create_time" label="创建日期" width="200" />
        <el-table-column prop="username" label="用户名" width="120" />
        <el-table-column prop="id" v-if="false" label="用户名" width="120" />
        <!-- <el-table-column prop="password" label="密码" width="120" /> -->
        <el-table-column prop="realname" label="真实姓名" width="120" />
        <el-table-column prop="role" label="角色" width="100" />
        <!-- <el-table-column prop="createtime" label="创建时间" width="200" /> -->
        <el-table-column prop="user_key" label="用户秘钥" width="300" />
        <el-table-column prop="expiryDate" label="密钥有效期" width="200" />
        <el-table-column fixed="right" label="操作" min-width="120">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="openEditDialog(scope.row)">
              修改
            </el-button>
            <el-button link type="primary" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
    
  </el-container>
      <!-- 编辑弹窗组件 -->
      <UpdateUserInfo 
      ref="editDialog" 
      :departments="departments"
      @success="fetchUsers"
    />
</template>
    
    <script lang="ts" setup>
import { ref, onMounted } from "vue";
import axios from "axios";
    import { Search } from "@element-plus/icons-vue";
    import UpdateUserInfo from '@/views/UpdateUserInfo.vue';

const input1 = ref("");

const tableData = ref([]);
// 2. 添加数据获取函数
const fetchData = async () => {
  try {
    const response = await axios.get("https://localhost:5005/api/user/list"); // 替换为实际API地址
    tableData.value = response.data; // 绑定API返回数据 [[23]]
  } catch (error) {
    console.error("数据获取失败:", error);
    // 可添加错误处理（如显示提示）
  }
};

// 3. 组件挂载时获取数据
onMounted(() => {
  fetchData();
  fetchUsers();
});

const userList = ref([])
const departments = ref([])
    // const editDialog = ref(null)
    const editDialog = ref<InstanceType<typeof UpdateUserInfo> | null>(null);
// 加载用户列表
const fetchUsers = async () => {
  try {
    const response = await axios.get('api/userinfo')
    userList.value = response.data
  } catch (error) {
    console.error('加载用户列表失败', error)
  }
    }
// 打开编辑弹窗
    const openEditDialog = (user: any) => {
      console.log("click");
    // 添加安全调用检查
    if (editDialog.value?.openDialog) {
    editDialog.value.openDialog(user.id); // 使用 user.id 而不是 userId
  } else {
    console.error('editDialog 引用无效或 openDialog 方法不存在');
  }
  // editDialog.value.openDialog(user.userId)
}
</script>
<style scoped>
.button-group-container {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.right-buttons {
  margin-left: auto;
  display: flex;
  align-items: center;
}
</style>